<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>用户详情</span>
      <el-button v-if="!isEditing" class="edit-btn" type="primary" @click="enableEdit">编辑</el-button>
      <el-button v-else class="edit-btn" type="success" @click="saveInfo">保存</el-button>
      <el-button v-if="!isCertified" class="auth-btn" type="warning" @click="authenticate">立即认证</el-button>
    </div>
    <div>
      <el-form :model="userInfo" label-width="120px">
        <el-form-item label="账号">
          <span>{{ userInfo.username }}</span>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-if="isEditing" v-model="userInfo.realname" />
          <span v-else>{{ userInfo.realname }}</span>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-if="isEditing" v-model="userInfo.sex" placeholder="选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
          <span v-else>{{ userInfo.sex }}</span>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-if="isEditing" v-model="userInfo.idCard" />
          <span v-else>{{ userInfo.idCard }}</span>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-if="isEditing" v-model="userInfo.phone" />
          <span v-else>{{ userInfo.phone }}</span>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-if="isEditing" v-model="userInfo.email" />
          <span v-else>{{ userInfo.email }}</span>
        </el-form-item>
        <el-form-item label="注册时间">
          <span>{{ userInfo.regTime  }}</span>
        </el-form-item>
        <el-form-item label="状态">
          <span>{{ getStatusText(userInfo.status) }}</span>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script setup>
import { ref } from "vue";
import userApi from "@/api/UserApi.js";
import { ElMessage } from "element-plus";

const userInfo = ref({});
const isEditing = ref(false);
const isCertified = ref(false);

// 获取用户信息
const getUserInfo = () => {
  userApi.getInfo().then((resp) => {
    if (resp.code === 10000) {
      userInfo.value = resp.data;
      isCertified.value = resp.data.status === 1;
    } else {
      ElMessage.error(resp.msg);
    }
  });
};

// 启用编辑模式
const enableEdit = () => {
  isEditing.value = true;
};

// 保存编辑后的信息
const saveInfo = () => {
  userApi.updateInfo(userInfo.value).then((resp) => {
    if (resp.code === 10000) {
      ElMessage.success("信息保存成功");
      isEditing.value = false;
      getUserInfo(); // 重新获取用户信息
    } else {
      ElMessage.error(resp.msg);
    }
  });
};

// 认证功能
const authenticate = () => {
  // 认证逻辑
  ElMessage.success("认证成功");
  userInfo.value.status = 1;
  saveInfo()
  isCertified.value = true;
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: "未认证",
    1: "已认证",
    2: "禁用",
    3: "注销",
  };
  return statusMap[status] || "未知状态";
};

getUserInfo();
</script>

<style scoped>
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
.edit-btn {
  float: right;
}
.auth-btn {
  float: right;
  margin-right: 10px;
}
</style>
